<template>
	<div class="mt15">
		 <el-row :gutter="20">
		    <el-col :span="5">
				<div class="pl30 mt15">
					<div class="main-color fs16 mb20 fb">
						产品分类
					</div>
					 <el-tree
					    style="max-width: 600px"
					    :data="data"
					    :props="defaultProps"
					    @node-click="handleNodeClick"
					  />
				</div>
			</el-col>
		    <el-col :span="19">
				<div class="flex col-center row-between plr30 pb10">
					<div>
						已选择<span class="main-color">0</span>个解决方案
					</div>
					<el-form class="flex col-top row-between" :model="queryParams" ref="queryRef" :inline="true">
						<el-form-item label="产品名称/编号" prop="keyWords" style="margin-bottom: 0;">
							<el-input
							v-model="queryParams.node"
							placeholder="请输入"
							clearable
							class="resetInput"
							style="width: 200px"
							:suffix-icon="Search"
							@keyup.enter="handleQuery"
							/>
						</el-form-item>
						<el-button class="mt5" type="defaultBtn" @click="handleQuery">搜索</el-button>
						<el-button class="mt5" @click="resetQuery">重置</el-button>
					</el-form>		
				</div>
				<el-table
				   v-loading="loading"
				   :data="list"
				   style="width: 100%;"
					 :header-row-style="{background:'#FAFAFA',color:'#0C1019',height:'54px'}"
					 :cell-style="{height:'54px'}"
					 @selection-change="handleSelectionChange"
				>
				  <el-table-column type="selection" width="55" align="center" />
				   <el-table-column label="商品名称" align="center">
				      <template #default="scope">
				         <span class="main-color" >{{scope.row.customerName}}</span>
				      </template>
				   </el-table-column>
				   <el-table-column label="商品编号" align="center" prop="createByName" :show-overflow-tooltip="true" />
				   <el-table-column label="标准单价" align="center" prop="businessManagerName" :show-overflow-tooltip="true" />
				   <el-table-column label="标准单价" align="center" prop="phoneNumber" :show-overflow-tooltip="true" />
				   <el-table-column label="备注信息" align="center" prop="latestFollowupTime" :show-overflow-tooltip="true" />
				</el-table>
				<pagination v-show="total > 0" :total="total" v-model:page="pageNum" v-model:limit="pageSize" />
			</el-col>
		  </el-row>
		
	</div>
</template>

<script>
	import {resetForm,getUserInfo} from '@/utils/ruoyi'
	import { customerList } from "@/api/business/customer";
	export default{
		data(){
			return{
				data: [
					{
				        label: '一级 1',
						children: [{
							label: '二级 1-1',
						}]
				    },
				],
				defaultProps: {
				  children: 'children',
				  label: 'label'
				},
				pageNum:'',
				pageSize:'',
				total:'',
				queryParams:{
					node:''
				},
				list:[],
				loading:true
			}
		},
		mounted() {
		  this.getList();
		},
		methods:{
			handleNodeClick(data) {
				console.log(data);
			},
			// 重置按钮操作
			resetQuery() {
			  this.resetForm("queryRef");
			  // this.handleQuery();
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
			  // ids.value = selection.map(item => item.jobId);
			  // single.value = selection.length != 1;
			  // multiple.value = !selection.length;
			},
			// 请求列表数据
			getList(){
				this.loading = true;
				customerList(this.queryParams).then(response => {
				  this.list = response.rows;
				  this.total = response.total;
				  this.loading = false;
				});
			},
			
		}
	}
</script>

<style>
</style>